// 轮播图----------------->
var swiper = new Swiper(".mySwiper", {
  autoplay: true,
  spaceBetween: 30,
  effect: "fade",
  navigation: {
    nextEl: ".swiper-button-next",
    prevEl: ".swiper-button-prev",
  },
  pagination: {
    el: ".swiper-pagination",
    clickable: true,
  },
});

//轮播图左侧区域
let phoneLeft = null;
const getPhoneLeft = function getPhoneLeft() {
  let xhrPhoneLeft = new XMLHttpRequest;
  xhrPhoneLeft.open("GET", "phoneleft.json", false);
  xhrPhoneLeft.onreadystatechange = function () {
    if (xhrPhoneLeft.readyState === 4 && xhrPhoneLeft.status === 200) {
      phoneLeft = JSON.parse(xhrPhoneLeft.response);
    }
  }
  xhrPhoneLeft.send()
}
getPhoneLeft();

let children = document.querySelector(".children-list-col");
let strValue = ``;
phoneLeft.forEach(item => {
  let { imgSrc, title } = item;
  strValue += ` <li>
                  <a href="">
                   <img src="${imgSrc}" alt="">
                   <span>${title}</span>
                  </a>
                 </li>`;
  children.innerHTML = strValue;
})



// phone区域
let data = null;
const getphone = function getphone() {
  let xhrphone = new XMLHttpRequest;
  xhrphone.open("GET", "phone.json", false);
  xhrphone.onreadystatechange = function () {
    if (xhrphone.readyState === 4 && xhrphone.status === 200) {
      data = JSON.parse(xhrphone.response);
    }
  }
  xhrphone.send();
}
getphone();

let phoneright = document.querySelector(".phoneright")
let str = ``;
data.forEach(item => {
  let { img, title, text, price, usedprice } = item;
  str += `<li>
            <a href="https://www.mi.com/mi12s-ultra">
              <img src="${img}" alt="">
              <h3>${title}</h3>
              <p>${text}</p>
              <span class="Price">${price}</span>
              <del class="usedPrice">${usedprice}</del>
            </a>
          </li>`;
  phoneright.innerHTML = str;
})

// computer区域
let datatwo = null;
const getcomputer = function getcomputer() {
  let xhrcomputer = new XMLHttpRequest;
  xhrcomputer.open("GET", "computer.json", false);
  xhrcomputer.onreadystatechange = function () {
    if (xhrcomputer.readyState === 4 && xhrcomputer.status === 200) {
      datatwo = JSON.parse(xhrcomputer.response);
    }
  }
  xhrcomputer.send();
}
getcomputer();

let computerright = document.querySelector(".computerright")
let strtwo = ``;
datatwo.forEach(item => {
  let { img, title, text, price, usedprice } = item;
  strtwo += `<li>
  <a href="https://www.mi.com/shop/buy/detail?product_id=10000377">
    <img src="${img}" alt="">
    <h3>${title}</h3>
    <p>${text}</p>
    <span class="Price">${price}</span>
    <del class="usedPrice">${usedprice}</del>

  </a>

</li>`;

  computerright.innerHTML = strtwo;
})

/* 内容区域 */
function change(id) {
  let box = document.getElementById(id);
  let liList = box.querySelectorAll('.top');
  let ul = box.querySelectorAll('.znrightbox');
  for (let i = 0; i < liList.length; i++) {
    (function (i) {
      liList[i].onmouseenter = function () {
        for (let j = 0; j < liList.length; j++) {
          liList[j].className = '';
          ul[j].style.display = 'none';
        };
        this.className = 'hot';
        ul[i].style.display = "flex";
      }
    })(i);
  }
}
change('box')
change('boxtwo')
change('boxthree')
change('boxfour')
change('boxfive')
change('boxsix')
change('boxseven')

//点击回到顶部
let clickbox = document.querySelector(".clickbox");
    // html = document.documentElement||document.body;
   
    window.onscroll=function(){
      if(html.scrollTop>50){
        clickbox.style.opacity=1;
      }else{
        clickbox.style.opacity=0;
      }
    }
    
    // let timer=null,speed=50;
    // //点击 返回顶部按钮，滚动条慢慢上去
    // clickbox.onclick=function(){
    //   //html.scrollTop=0;
    //   if(timer==null){
    //     timer=setInterval(function(){
    //       //当 html.scrollTop 小于等于0，
    //       //定时定时器
    //       if(html.scrollTop<=0){
    //         clearInterval(timer);
    //         timer=null;
    //         html.scrollTop=0;//距离顶部，直接写成0
    //         return;//中断
    //       }
    //       html.scrollTop-=speed;
    //     },10)
    //   }
    // }
